<template>
  <section class="comment_main">
    <header>
      <p>{{comments?comments.data.length:0 }}个回答</p>
      <div class="comm_area">
        <div class="comm_input">
          <div class="tip">{{commMain.length}}/45</div>
          <el-input class="input" placeholder='发表评论' rows='2' resize='none' maxlength=45
            type="textarea"
            v-model="commMain"></el-input>
        </div>
        <span @click="sureComm">发表</span>
      </div>
    </header>
    <div class="comment_wrap"
      v-for="item in comments.data"
      :key="item.id">
      <div class="user_pic">
        <img v-if="item.created_by.headImg" :src="item.created_by.headImg" alt="">
        <img v-else src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1520324417712&di=abad91e8c616c8785729345d3f844a82&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01786557e4a6fa0000018c1bf080ca.png" alt="">
      </div>
      <div class="user_comm">
        <header>
          <span class="comm_user">{{item.created_by.username}}</span>
          <span>{{GLOBAL.timestampToTime(item.created_at)}}</span>
        </header>
        <div class="comment">
          {{item.content}}
        </div>
        <div class="tip">
          <!-- <span class="like">赞</span> -->
          <span class="comm_comm"
           @click="commCommHandle(item.id,item.id,item.created_by.username)">{{item.count_comment}}评论</span>
        </div>
        <!-- 嵌套评论 -->
        <section class="comments_wrap"
          v-if="commCommID===item.id"
          v-for="i in commCommList.data"
          :key="i.id">
          <header>
            <div class="user">{{i.created_by.username}}</div>
            <div>
              <span>{{GLOBAL.timestampToTime(i.created_at)}}</span>
              <span class="sure_comm" 
                @click="commCommHandle(item.id,i.id,i.created_by.username)">评论</span>
            </div>
          </header>
          <div><p>
              <span v-if="i.parent_comment">评论</span>
              <span class="user">{{i.parent_comment? i.parent_comment.created_by.username:''}}:</span>
              {{i.content}}</p>
          </div>
        </section>
        <review-box
          v-if="commCommID===item.id"
          :id="{ID}"
          @upup="change"></review-box>
      </div>
    </div>
  </section>
</template>
<script>
import commComm from '../components/CommComm'
import reviewBox from '../components/ReviewBox'
export default {
  props:['id'],//id:->帖子id,tid->主题id
  data(){
    return{
      commMain:'',
      comments:{data:[]},//所有评论数据
      commCommID:NaN,  //定义嵌套评论初始值，
      commCommList:[],
      ID:{
        pid:0,
        tid:this.id.tid,
        top_comment:0,
        tag:'',
      }
    }
  },
  components:{
    reviewBox,
    commComm
  },
  mounted(){
    this.getData(0)
  },
  methods:{
    change(id){
      this.getData(id)
    },
    sureComm(){//提交帖子评论
      if (this.commMain.trim()=='')return
      this.GLOBAL.tokenRequest({
        method:'post',
        baseURL:this.GLOBAL.API_RNTY_URL,
        url:'ftcomments/publish',
        data:{
          content:this.commMain,
          pid:this.ID.pid,//评论帖子|回复的id
          tid:Number(this.ID.tid),//板块id
          top_comment_id:0
        }
      }).then(({data:data})=>{
        if(data.status){//成功
          this.commMain = '';
          this.getData(0)
        }
      })
    },
    commCommHandle(id,pid,tag){
      //点击评论赋值，如相同则显示评论输入框
      this.ID = {
        pid:pid,
        tid:this.id.tid,
        top_comment:id,
        tag,
      }
      this.commCommID = id;
      this.getData(0)
      this.getData(id);
    },
    getData(id){
      //获取top_comment_id层所有评论
      this.GLOBAL.request({
        baseURL:this.GLOBAL.API_RNTY_URL,
        url:'ftcomments/list',
        param:{
          tid:this.id.id,
          top_comment_id:id,
        }
      }).then(({data:data})=>{
        if(id===0){
          this.comments = data;
        }else{
          this.commCommList = data
        }
      })
    }
  }
}
</script>
<style scoped>
.comment_main{
  width:1200px;
  min-height:600px;
  margin: 0 auto;
  box-sizing: border-box;
}
.comment_main header{
  padding-left:26px; 
  font: bold 18px/60px "微软雅黑";
  background: url('../assets/images/comm.png') 0 24px no-repeat;
}
.comment_wrap{
  border-bottom: 1px solid #dedede;
  padding:20px 0 30px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.comm_user{
  color:#2965b1;
}
.user_pic{
  width: 60px;
  height:60px;
}
.user_pic img{
  width: 100%;
}
.comm_user:hover{
  text-decoration: underline;
  cursor: pointer;
}
.user_comm{
  width:1120px;
}
.user_comm header{
  display: flex;
  justify-content: space-between;
}
.user_comm header span{
  margin-right: 10px;
  font-size: 14px;
}
.comment{
  font: 16px/36px '宋体';
  text-indent: 40px;
}
.tip{
  text-align: right;
  font-size: 12px;
}
.tip span{
  padding: 0 8px;
  cursor: pointer;
}
/* 评论 */
.comments_wrap{
  margin-top:15px;
  padding-left:60px; 
  min-height:60px;
  border-bottom: 1px solid #dedede;
}
.comments_wrap header{
  width:930px;
  font: 14px/22px '微软雅黑';
  margin-bottom: 1px;
  display: flex;
  padding:0 5px;
  justify-content: space-between;
}
.comments_wrap p{
  padding: 0 20px;
  font:14px/20px '微软雅黑'
}
.comments_wrap .user{
  color:#2965b1;
}
.comments_wrap .user:hover{
  text-decoration: underline;
  cursor: pointer;
}
.comments_wrap .sure_comm{
  cursor: pointer;
}
.comm_area{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.comm_area span{
  width:60px;
  height:30px;
  background-color: #3c7cff;
  color:#fff;
  font:14px/30px "微软雅黑";
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
}
.comm_input{
  width:1100px;
  height:100px;
  position: relative;
  background-color: #f8f8f8;
}
.comm_input .tip{
  position: absolute;
  right: 40px;
  bottom:22px;
  width:80px;
  height:30px;
  font:30px/30px arail;
}
.comm_input .input{
  width:1070px;
  font:18px/30px "微软雅黑";
  display: block;
  margin:10px auto 0;
}
</style>

